<template>
  <d2-container class="page">
    <div class="header">
      <el-row :gutter="24" v-if="bellInfo.id">
        <el-col :span="24">
          <el-alert :closable="false" type="success"><span slot="title" @click="showBell" class="alert-text">
              <i class="fa fa-bell-o" style="font-size: 20px"></i>
              {{bellInfo.title}}
            </span></el-alert>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="24">
      <!-- 交易笔数 -->
      <el-col :span="6">
        <el-card shadow="hover" class="my-card">
          <div slot="header" class="clearfix no-select" style="text-align: center">
            {{ $t('page.form.tips1') }}
          </div>
          <el-row type="flex" align="middle" justify="center" style="height: 40px" v-loading="infoLoading">
            <template v-if="!!timeStats">
              <el-col :span="12" style="text-align: center">
                <div style="font-size: 35px">
                  {{ formatNormalNum(timeStats.dailyTradeSuccessCount +timeStats.dailyTradeFailedCount )|| 0 }}
                </div>
              </el-col>
              <el-col :span="12">
                <div style="color: #67c23a">
                  <span class="no-select">{{$t('page.form.success')}}: </span>
                  <span>{{ formatNormalNum(timeStats.dailyTradeSuccessCount) || 0}}</span>
                </div>
                <div style="color: #f56c6c">
                  <span class="no-select">{{$t('page.form.defeated')}}: </span>
                  <span>{{ formatNormalNum(timeStats.dailyTradeFailedCount) || 0}}</span>
                </div>
              </el-col>
            </template>
            <template v-else>
              <span style="opacity: 0.5" class="no-select">{{
                !!infoLoading ? $t('page.form.tips7') : $t('page-announcement.d2-crud.empty-data')
              }}</span>
            </template>
          </el-row>
        </el-card>
      </el-col>
      <!-- 成功交易总金额 -->
      <el-col :span="6">
        <el-card shadow="hover" class="my-card">
          <div slot="header" class="clearfix no-select" style="text-align: center">
            {{ $t('page.form.tips2') }}
          </div>
          <el-row type="flex" align="middle" justify="center" style="height: 40px" v-loading="infoLoading">
            <template v-if="!!timeStats">
              <el-col style="text-align: center">
                <div style="font-size: 35px">
                  <span class="no-select" style="font-size: 20px">{{ timeStats.settleCurrency || '--' }}
                  </span>
                  <span>{{ formatPriceNum(timeStats.dailyTradeSuccessSettleAmount)|| 0 }}</span>
                </div>
              </el-col>
            </template>
            <template v-else>
              <span style="opacity: 0.5" class="no-select">{{
                !!infoLoading ? $t('page.form.tips7') : $t('page-announcement.d2-crud.empty-data')
              }}</span>
            </template>
          </el-row>
        </el-card>
      </el-col>

      <!-- 成功核算总金额 -->
      <el-col :span="6">
        <el-card shadow="hover" class="my-card">
          <div slot="header" class="clearfix no-select" style="text-align: center">
            {{ $t('page.form.tips3') }}
          </div>
          <el-row type="flex" align="middle" justify="center" style="height: 40px" v-loading="infoLoading">
            <template v-if="!!timeStats">
              <el-col :span="12" style="text-align: center">
                <div style="font-size: 35px">
                  {{ formatNormalNum(timeStats.monthlyTradeSuccessCount + timeStats.monthlyTradeFailedCount )|| 0 }}
                </div>
              </el-col>
              <el-col :span="12">
                <div style="color: #67c23a">
                  <span class="no-select">{{$t('page.form.success')}}: </span>
                  <span>{{ formatNormalNum(timeStats.monthlyTradeSuccessCount)|| 0}}</span>
                </div>
                <div style="color: #f56c6c">
                  <span class="no-select">{{$t('page.form.defeated')}}: </span>
                  <span>{{ formatNormalNum(timeStats.monthlyTradeFailedCount) || 0}}</span>
                </div>
              </el-col>
            </template>
            <template v-else>
              <span style="opacity: 0.5" class="no-select">{{
                !!infoLoading ? $t('page.form.tips7') : $t('page-announcement.d2-crud.empty-data')
              }}</span>
            </template>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="my-card">
          <div slot="header" class="clearfix no-select" style="text-align: center">
            {{ $t('page.form.tips4') }}
          </div>
          <el-row type="flex" align="middle" justify="center" style="height: 40px" v-loading="infoLoading">
            <template v-if="!!timeStats">
              <el-col style="text-align: center">
                <div style="font-size: 35px">
                  <span class="no-select" style="font-size: 20px">{{ timeStats.settleCurrency || '--'}}
                  </span>
                  <span>{{ formatPriceNum(timeStats.monthlyTradeSuccessSettleAmount)  || 0}}</span>
                </div>
              </el-col>
            </template>
            <template v-else>
              <span style="opacity: 0.5" class="no-select">{{
                !!infoLoading ? $t('page.form.tips7') : $t('page-announcement.d2-crud.empty-data')
              }}</span>
            </template>
          </el-row>
        </el-card>
      </el-col>

      <!-- 第二行 -->

      <!-- 公告信息 -->
      <el-col :span="24">
        <h2> {{ $t('page.form.tips5') }}</h2>
        <div class="chartHeader">
          <el-select v-model="formData.dateType" :placeholder="$t('page.form.date')" style=" width: 200px" @change="changeLin">
            <el-option v-for="(item, index) in dateTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <ve-line :data="chartData" :extend="chartExtend"></ve-line>
      </el-col>
      <el-col :span="24">
        <h2> {{ $t('page.form.tips6') }}</h2>
        <div class="chartHeader">
          <el-select v-model="formData2.dateType" :placeholder="$t('page.form.date')" style=" width: 200px" @change="changeLin2">
            <el-option v-for="(item, index) in dateTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <ve-line :data="chartData2" :extend="chartExtend"></ve-line>
      </el-col>
    </el-row>
    <notice-dialog ref="notice-dialog" @dialog-close="fetchMainData"></notice-dialog>
  </d2-container>
</template>

<script>
import ApiBell from '@/api/system.bell';
import { mapState, mapGetters, mapActions } from "vuex";
import util from "@/libs/util";
import ApiMain from "@/api/index.dashboard";
import ApiAnnouncement from "@/api/index.announcement";
import CardAnnouncement from "./components/card-announcement";
import noticeDialog from "../componts/noticeDialog";
export default {
  name: "index",
  mixins: [],
  components: {
    CardAnnouncement,
    noticeDialog,
  },
  data() {
    return {
      chartExtend: {
        series: {
          smooth: false,
        },
      },
      chartData: {
        columns: ["日期", "前七天"],
        rows: [
          { 日期: "1/1", 前七天: 1393, },
          { 日期: "1/2", 前七天: 3530, },

        ],
      },
      chartData2: {
        columns: ["日期", "前七天"],
        rows: [
          { 日期: "1/1", 前七天: 1393, },
          { 日期: "1/2", 前七天: 3530, },

        ],
      },
      priceNote: "￥",
      infoLoading: false,
      info: null,
      timeStats: {},
      formData: {
        dateType: 1,

      },
      formData2: {
        dateType: 1,
      },
      dateTypeOptions: [{
        value: 1,
        label: this.$t('page.form.seven-days-ago'),
      },
      {
        value: 2,
        label: this.$t('page.form.month-ago'),
      }],
      lineTypeptions: [{
        value: 1,
        label: this.$t('page.form.success-transaction-count'),
      },
      {
        value: 2,
        label: this.$t('page.form.success-settle-amount'),
      }],
      announcement: {
        loading: false,
        list: [],
        page: 1,
        limit: 20,
        total: 0,
      },
      bellInfo: {},
      ter: {},
    };
  },
  computed: {
    ...mapState("d2admin/user", {
      user: "info",
    }),
  },
  watch: {
    "$i18n.locale": (val, old) => {
      location.reload();
    },
  },
  mounted() {
    // if (this.user.terIdList.length > 0) {
    //   this.ter = this.user.terIdList[0];
    // }

    // this.resetMainData();
    this.getRealTimeStats()
    this.getBell()
    this.changeLin()
    this.changeLin2()
  },
  beforeDestroy() { },
  methods: {
    async changeLin2() {
      this.chartData2.rows = []
      let linData = await ApiMain.getLineChart({
        dateType: this.formData2.dateType,
        lineType: 1
      })

      let label1 = this.$t('page.form.date')
      let label2 = this.$t('page.form.numbersuccessfultrades')


      this.chartData2.columns = [label1, label2]
      linData.list.forEach(item => {
        let obj = {}
        obj[label1] = item.statDate
        obj[label2] = item.successCount
        this.chartData2.rows.push(obj)
      })

      console.log(this.chartData2.rows)
    },
    async changeLin() {
      this.chartData.rows = []
      let linData = await ApiMain.getLineChart({
        dateType: this.formData.dateType,
        lineType: 2
      })
      let label1 = this.$t('page.form.date')
      let label2 = this.$t('page.form.Successfulsettlementamount')
      this.chartData.columns = [label1, label2]
      linData.list.forEach(item => {
        let obj = {}
        obj[label1] = item.statDate
        obj[label2] = item.successSettleAmount
        this.chartData.rows.push(obj)


      })

    },
    async getRealTimeStats() {
      let data = await ApiMain.getRealTimeStats()
      this.timeStats = data

    },
    // 重置表单
    async getBell() {
      let data = await ApiBell.listPlat({ limit: 100, page: 1 })
      console.log(data)
      if (data.list.length > 0) {
        // 过滤出未读的
        this.bellInfo = data.list[0]
      }
    },
    resetMainData() {
      this.fetchMainData();
    },
    showBell() {
      this.$refs["notice-dialog"].show(this.bellInfo);
    },
    async handleTerminalChange(ter) {
      this.ter = ter;

      this.infoLoading = true;
      await this.fetchTerminalStat();
      this.infoLoading = false;
    },

    async fetchMainData() {
      // this.infoLoading = true;
      // await Promise.all([this.fetchTerminalStat(), this.fetchAnnouncement()]);
      // this.infoLoading = false;
    },
    async fetchTerminalStat() {
      if (!this.ter) return;

      var info = null;
      try {
        info = await ApiMain.getTerminalStat({ terId: this.ter.terId });
      } catch (err) { }

      this.info = info;
    },

    async fetchAnnouncement() {
      this.$refs["card-announcement"] &&
        (await this.$refs["card-announcement"].fetchMainData());
    },

    formatNormalNum(num) {
      return util.tool.formatThousandSplitNumber(num);
    },
    formatPriceNum(num) {
      // 除以100并保留两位小数
      var num = (num / 100).toFixed(2);
      num = util.tool.formatThousandSplitNumber(num);
      return num;
    },
  },
};
</script>

<style scoped>
.chartHeader {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 50px;
  margin-bottom: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  text-align: center;
}
.clearfix:after {
  clear: both;
}
.my-card {
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.header {
  margin-bottom: 20px;
}
.alert-text {
  cursor: pointer;
}
</style>
